<template>
  <div>
    <el-card>
      <el-alert
        title="用于进行积分充值的时候提供充值选项"
        type="warning"
        :closable="false"
        show-icon
      >
      </el-alert>

      <!-- 数据表格 start-->
      <PageTable :loading="loading" :data="dataSource" :columns="columns" :options="options" />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getIntegralMealList"
      />
      <!-- 数据表格 end-->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CompanySettingIntegral',
  components: {},
  props: {},
  data() {
    return {
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 10,

      // 表格加载
      loading: true,
      // 表格配置
      options: {
        border: false,
        select: false
      },
      // 列配置
      columns: [
        { prop: 'integral', label: '积分值' },
        {
          label: '赠送积分值',
          prop: 'giftIntegral',
          render: (h, { row }) => {
            const num = row.giftIntegral || '暂无'
            return <div style="color:#fc4560;height:50px;line-height:50px">{num}</div>
          }
        },
        {
          label: '需支付金额',
          prop: 'amount',
          render: (h, { row }) => {
            return <div style="color:#fc4560;">￥{row.amount}</div>
          }
        },
        { prop: 'sort', label: '排序' },
        {
          label: '是否启用',
          prop: 'isOpen',
          render: (h, { row }) => {
            const status = row.isOpen ? '已启用' : '未启用'
            return <div style={`color:${row.isOpen ? '#857E7E' : '#ddd'}`}>{status}</div>
          }
        },
        { prop: 'createdTime', label: '新增时间' },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-link
                  underline={false}
                  type="primary"
                  class="mr-10"
                  onClick={() => this.toEditOption(row)}
                >
                  编辑
                </el-link>
                {row.isOpen ? (
                  <PopConfirm title="是否隐藏该项？" confirm={() => this.handleMeal(false, row)}>
                    <el-link underline={false} type="info">
                      隐藏
                    </el-link>
                  </PopConfirm>
                ) : (
                  <el-link underline={false} onClick={() => this.handleMeal(true, row)}>
                    启用
                  </el-link>
                )}
              </div>
            )
          }
        }
      ],
      // 表格源数据
      dataSource: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 获取积分套餐列表
    this.getIntegralMealList()
  },
  methods: {
    // 获取积分套餐列表
    async getIntegralMealList() {
      try {
        const {
          data: { records, total }
        } = await this.$http.user.integralConfig.list({ params: { ...this.listQuery } })
        this.dataSource = records
        this.total = total
        this.loading = false
      } catch (error) {
        console.log('getIntegralMealList', error)
      }
    },

    /**
     * 积分套餐隐藏启用操作
     * @params {Boolean} isOpen true--启用 false--隐藏
     * @params {Object} item 数据内容
     */
    handleMeal(isOpen, { id }) {
      // console.log(id)
      this.$http.user.integralConfig
        .isOpen({ id, isOpen })
        .then(() => {
          this.$message.success('操作成功')
          this.getIntegralMealList()
        })
        .catch(err => {
          console.log('handleMeal', err)
        })
    },

    /**
     * 点击编辑
     * @params {Object} item 数据内容
     */
    toEditOption({ id }) {
      this.$router.push({ name: 'EditIntegralOption', query: { id } })
    }
  }
}
</script>

<style lang="scss" scoped></style>
